<!-- 首页的组件 -->
<template>
	<div>
		<home-header></home-header>
		<home-swiper></home-swiper>
		<home-icons></home-icons>
		<home-recommend></home-recommend>
		<home-weekend></home-weekend>
		<home-footer></home-footer>
	</div>
</template>

<script>
	import Header from '../components/home/Header.vue'
	import Swiper from '../components/home/Swiper.vue'
	import Icons from '../components/home/Icons.vue'
	import Recommend from '../components/home/Recommend.vue'
	import Weekend from '../components/home/Weekend.vue'
	import Footer from '../components/home/Footer.vue'
	export default{
		data(){
			return{
				lastcity:''
			}
		},
		components:{
			homeHeader:Header,
			homeSwiper:Swiper,
			homeIcons:Icons,
			homeRecommend:Recommend,
			homeWeekend:Weekend,
			homeFooter:Footer
		},
		methods:{
			//获取首页的页面数据
			async getHomeInfo(){
				const {data:res}=await this.$http.get('data/index.json',{
					//想让它用不同的城市信息来获取不同城市的数据
					params:{
						city:this.$store.state.currentCity
					}
				})
				this.$store.dispatch('getHomeInfo',res)
			}
		},
		mounted:function(){
			//获取上一次选中的城市信息
			this.lastcity=this.$store.state.currentCity
			//发起请求，获取数据（仅限第一次页面渲染）
			this.getHomeInfo()
			// console.log('amounted')
		},
		//在添加了keep-alive标签之后，vue会存在这个生命周期函数，当页面从内存获取数据渲染页面前执行
		activated(){
			//如果再次进去主页时，选择的城市信息变化了，就发起请求，重新获取首页数据
			if(this.lastcity!==this.$store.state.currentCity){
				//这时就需要更新this.lastcity为最新的数据，为下一次再进入做准备
				this.lastcity=this.$store.state.currentCity
				this.getHomeInfo()
			}
		}
	}
</script>

<style>
</style>
